<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import * as echarts from 'echarts';
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'

	import {
		statisticsDashboardLineChart
	} from '@/api/meiyu/statistic'

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '350px'
			},
			autoResize: {
				type: Boolean,
				default: true
			},
			chartData: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				chart: null
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOptions(val)
				}
			}
		},
		mounted() {
			// this.go2Query()
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$el, 'macarons')
				this.setOptions(this.chartData)
			},
			go2Query() {
				statisticsDashboardLineChart(7).then((res) => {
					console.log("res", res)
					let dates = res.map(item => {
						return item.date
					})
					let yUserData = res.map(item => {
						return item.userTotal
					})
					this.chartData = {
						dates,
						yUserData
					}
					this.$nextTick(() => {
						this.initChart()
					})
				}).catch((error) => {
					console.log(error)
				})
			},
			setOptions({
				dates,
				yUserData
			} = {}) {
				this.chart.setOption({
					xAxis: {
						data: dates,
						boundaryGap: false,
						axisTick: {
							show: false
						}
					},
					grid: {
						left: 10,
						right: 40,
						bottom: 20,
						top: 30,
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						padding: [5, 10]
					},
					yAxis: {
						axisTick: {
							show: false
						}
					},
					legend: {
						data: ['每日新增用户']
					},
					series: [{
							name: '每日新增用户',
							itemStyle: {
								normal: {
									color: '#FF005A',
									lineStyle: {
										color: '#FF005A',
										width: 2
									}
								}
							},
							smooth: true,
							type: 'line',
							data: yUserData,
							animationDuration: 2800,
							animationEasing: 'cubicInOut'
						},
						// {
						// 	name: '每日新增访客',
						// 	smooth: true,
						// 	type: 'line',
						// 	itemStyle: {
						// 		normal: {
						// 			color: '#3888fa',
						// 			lineStyle: {
						// 				color: '#3888fa',
						// 				width: 2
						// 			},
						// 			areaStyle: {
						// 				color: '#f3f8ff'
						// 			}
						// 		}
						// 	},
						// 	data: actualData,
						// 	animationDuration: 2800,
						// 	animationEasing: 'quadraticOut'
						// }
					]
				})
			}
		}
	}
</script>